<template>
    <el-drawer v-model="showDrawer" :close-on-click-modal="false" :title="title" :size="size"
        :destroy-on-close="destroyOnClose">
        <div class="formDrawer">
            <div class="body">
                <slot></slot>
            </div>
            <div class="actions">
                <el-button type="primary" @click="submit" :loading="loading">{{ confirmText }}</el-button>
                <el-button type="default" @click="close">取消</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
    import { ref } from 'vue'

    const showDrawer = ref(false)

    const props = defineProps({
        title: String,
        size: {
            type: String,
            default: "45%"
        },
        destroyOnClose: {
            type: Boolean,
            default: false
        },
        confirmText: {
            type: String,
            default: "提交"
        }
    })

    // 抽屉开关方法
    const open = () => showDrawer.value = true
    const close = () => showDrawer.value = false
    // 提交
    const emit = defineEmits(["submit"])
    const submit = () => emit("submit")
    // loading属性
    const loading = ref(false)
    const showLoading = () => loading.value = true
    const hideLoading = () => loading.value = false
    // 向父组件暴露以下方法
    defineExpose({
        open,
        close,
        showLoading,
        hideLoading
    })
</script>

<style scoped>
    .formDrawer {
        @apply flex flex-col;
        height: 100%;
        width: 100%;
        position: relative;
    }

    .formDrawer .body {
        flex: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 50px;
        position: absolute;
        overflow-y: auto;
    }

    .formDrawer .actions {
        @apply mt-auto justify-center;
        height: 50px;
    }
</style>